<style lang="less" scoped>
.ad {
  img {
    width: 99%;
  }
}
.info {
  padding-left: 0.5em;
  .title {
    font-size: 1.35em;
  }
  .descp {
    padding-left: 0.5em;
    min-height: 5em;
    // font-size: 0.95em;
  }
  .price {
    padding-left: 0.5em;
    color: #ff3333;
    font-size: 0.95em;
    .price1 {
      font-size: 1.5em;
    }
  }
}
.zifei{
  padding-left: 5%;
  img{width:94%;}
}
.button-group {
  padding: 0.5em 1.5em;
}
</style>

<template>
    <div>
        <x-header class="header" :left-options="{backText: ''}"><span v-if="myInfo">{{myInfo.title}}</span></x-header>
        <div class="content">
            <div class="ad">
              <img :src="myInfo.ad" v-if="myInfo"/>
            </div>
            <div class="bar"></div>
            <div class="info" v-if="myInfo">
              <div class="title">【{{myInfo.title}}】</div>
              <div class="descp" v-html="myInfo.descp"></div>
              <div class="price">RMB: <span class="price1">{{myInfo.price1}}</span>.<span class="">{{myInfo.price2}}</span></div>
            </div>
            <div class="bar"></div>
            <div class="zifei" v-if="myInfo">
              <div>资费信息</div>
              <img :src="myInfo.zifei"/>
            </div>
            <div class="button-group">
              <x-button type="warn" @click.native="done('预约成功！')">预约办理</x-button>
            </div>
        </div>
    </div>
</template>
<script>
import { XHeader, XButton, Divider } from "vux";

export default {
  data() {
    return {
      type: "1",
      preOrders: [
        {
          ad: "static/image/ad1.png",
          title: "98元无限量流量王",
          descp: "省内流量不限量，国内流量4GB、省内流量达到20GB限速3MB， 达到100GB后关闭上网功能、国内通话1000分钟。",
          price1: "0",
          price2: "00",
          type: "1",
          zifei:"static/image/zifei1.jpg"
        },
        {
          ad: "static/image/ad2.png",
          title: "398元冰激凌",
          descp: "流量不限量，语音不限量，月费限时五折。",
          price1: "1000",
          price2: "00",
          type: "2",
          zifei:"static/image/zifei2.jpg"
        },
        {
          ad: "static/image/ad3.png",
          title: "88元融合套餐",
          descp: "融合产品，组合新装，组合产品品牌，两个资费一起选， 选择包年周期",
          price1: "700",
          price2: "00",
          type: "3",
          zifei:"static/image/zifei1.jpg"
        }
      ],
      myInfo: null
    };
  },
  mounted() {
    this.type = this.$route.params.type+'';
    this.initInfo();
  },
  methods: {
    initInfo() {
      console.log(this.type)
      this.myInfo = _.find(this.preOrders, { 'type': this.type });
      console.log(this.myInfo)
    },
    done(str) {
      this.$vux.toast.show({
        text: str,
        type: "success"
      });
    }
  },
  components: {
    XHeader,
    XButton,
    Divider
  }
};
</script>